<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上传图片（拍照上传、图库上传）</title>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
</head>
<body style="background-color: #F2F2F2">

<div>
    <div id="img1" style="width: 205px">

    </div>
    <div id="img2">

    </div>
</div>
<div>
    <button type="button" id="upload">上传</button>
</div>
<!--三方依赖-->
<script th:src="@{/js/jquery.min.js}"></script>
<!--<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->
<script th:src="@{/js/index.js}"></script>
<script>
    //初始化图片容器
    const img1 = new imgFactory('img1', [], [], []);
    img1.init()
    const img2 = new imgFactory('img2', [], [], []);
    img2.init()

    $('#upload').click(function () {
        //上传图片
        var data={
            url:'/common/uploads',
            //上传接口文件参数名
            fileParamName:'files'
        }
        img1.upload(data,"img1",function (res) {
            if (res.isSuccess){
                console.log(res.res)
                img2.upload(data,"img2",function (res) {
                    if (res.isSuccess){
                        console.log(res.res)
                    }
                })
            }
        })
    })
</script>
</body>
</html>
